<%@ taglib prefix="v" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/30
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/include.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="js/echarts.js"></script>


    <script type="text/javascript">
        $(function () {
            laydate.render({
                elem: '#createTime'
                , range: true
            });

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            proReport();


            function proReport() {
                var demandType = $("#demandType").val();
                var createId = $("#createId").val();
                var createTime = $("#createTime").val();
                var demandProduct = $("#demandProduct").val();

                var beginTime = "";
                var endTime = "";
                if ("" != createTime){
                    beginTime = createTime.substring(0,10);
                    endTime = createTime.substring(13);
                }

                var url = "getSerData.html";
                var args = {
                    "demandType": demandType,
                    "createId": createId,
                    "beginTime": beginTime,
                    "endTime": endTime,
                    "demandProduct": demandProduct

                };

                //加载进度条
                layer.load(2, {
                    shade: [0.2, '#999999'] //0.1透明度的白色背景
                });
                $.post(url, args, function (data) {
                    data = jQuery.parseJSON(data);

                    var legend8 = '待处理(' + data.sum8 + ')';
                    var legend9 = '处理中(' + data.sum9 + ')';
                    var legend10 = '已处理(' + data.sum10 + ')';

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '产品客服工作量统计'
                        },
                        //移动到柱子显示数据
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataView: {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            },
                            optionToContent:function(opt) {
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var table ='<table id="test" class="table-bordered table-striped" style="width:100%;text-align:center">';
                                table = table + '<tbody><tr>'+ '<td>城市</td>'+ '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>'+ '<td>' + series[2].name + '</td>' + '</tr>';
                                for (var i = 0, l = axisData.length; i < l; i++) {
                                    table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>'+ '<td>' + series[2].data[i] + '</td>'+ '</tr>';
                                }
                                table += '</tbody>';
                                return table;
                            }
                        },
                        legend: {
                            data: [legend8, legend9, legend10],
//                            selected: {
//                                '处理中': false
//                            }
                        },
                        xAxis: {
                            data: data.proStr
                        },
                        yAxis: [{type: 'value'}],
                        calculable: true,
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        series: [
                            {
                                name: legend8,
                                type: 'bar',
                                data: data.proData8Str
                            },
                            {
                                name: legend9,
                                type: 'bar',
                                data: data.proData9Str
                            },
                            {
                                name: legend10,
                                type: 'bar',
                                data: data.proData10Str
                            },
                        ]
                    };
                    layer.closeAll('loading');
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                });

            }

//            $("#demandType").change(function () {
//                proReport()
//            });
            $("#searchBtn").click(function () {
                proReport();
            });

//            $("#createId").change(function () {
//                proReport()
//            });
        });

    </script>
</head>
<body>
<form role="form" class="form-inline" style="margin-bottom: 10px;margin-top: 10px" id="searchForm"
      method="post" >
    <div class="form-group">

        <select id="demandType" style="width: 150px;margin-top: 5px;margin-left: 5px;"
                class="form-control">
            <option value="">
                全部类型
            </option>
            <option value="1">
                操作
            </option>
            <option value="2">
                BUG
            </option>
        </select>

        <select id="createId" style="width: 150px;margin-top: 5px;margin-left: 5px;"
                class="form-control">
            <option value="">
                产品客服
            </option>
            <c:forEach items="${list}" var="user">
                <option value="${user.id}">
                        ${user.realName}
                </option>
            </c:forEach>

        </select>

        <select id="demandProduct" name="demandProduct"
                class="form-control" style="margin-top: 5px;margin-left: 5px;"
                required="" aria-required="true">
            <option value="0">
                问题产品
            </option>
            <c:forEach items="${productList}" var="product">
                <option value="${product.id}">${product.product_name}</option>
            </c:forEach>
        </select>

        <input style="margin-top: 5px;margin-left: 5px;" readonly name="createTime" size="20" id="createTime"
               placeholder="录入时间" type="text"
               class="form-control">
        <button style="margin-top: 5px;margin-left: 5px;" type="button" id="searchBtn"
                class="btn btn-primary">搜索</button>
        <input style="margin-top: 5px;margin-left: 5px;"  type="reset" id="resetBut"
               value="重置" class="btn btn-reset">
    </div>
</form>
<p>

</p>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 95%;height:90%;margin-top: 30px"></div>
</body>


</html>
